<template>
  <div>
    <!-- 上_第一个按钮 -->
    <el-row :gutter="20">
      <el-button class="text_button" type="success"><b>成功按钮</b></el-button>
    </el-row>
    <el-row>
      <el-col>
        <el-button class="button" type="success" plain>
          <a style="font-size: large;" class="icon_left">
            <i class="el-icon-user" style="margin: 0 10px; font-size: 20px; color: green;" @click="insertAttr">
              <a class="icon_left"></a>
            </i>
            <b>基础形象</b>
          </a><br><br>
          <a class="icon_left">&nbsp;&nbsp;&nbsp;<b>设计个体化数字人形象</b></a>
          <a class="v1_right" style="font-size: 20px;"><i class="el-icon-arrow-right"></i></a>
        </el-button>
      </el-col>
    </el-row>

    <el-divider></el-divider>

    <!-- 中_第一个按钮 -->
    <el-row :gutter="20">
      <el-button class="text_button" type="success"><b>3D 应用</b></el-button>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-button class="button" type="success" plain>
          <a style="font-size: large;" class="icon_left">
            <i class="el-icon-video-camera" style="margin: 0 10px; font-size: 20px; color: green;" @click="insertAttr">
              <a class="icon_left"></a>
            </i>
            <b>虚拟直播</b>
          </a><br><br>
          <a class="icon_left">&nbsp;&nbsp;&nbsp;<b>中之人/AI驱动的一站式开播服务</b></a>
          <a class="v1_right" style="font-size: 20px;"><i class="el-icon-arrow-right"></i></a>
        </el-button>
      </el-col>

      <!-- 中_第二个按钮 -->
      <el-col :span="8">
        <el-button class="button" type="success" plain>
          <a style="font-size: large;" class="icon_left">
            <i class="el-icon-s-custom" style="margin: 0 10px; font-size: 20px; color: green;" @click="insertAttr">
              <a class="icon_left"></a>
            </i>
            <b>智能角色/NPC</b>
          </a><br><br>
          <a class="icon_left">&nbsp;&nbsp;&nbsp;<b>打造具有对话能力的智能数字人</b></a>
          <a class="v1_right" style="font-size: 20px;"><i class="el-icon-arrow-right"></i></a>
        </el-button>
      </el-col>

      <!-- 中_第三个按钮 -->
      <el-col :span="8">
        <el-button class="button" type="success" plain>
          <a style="font-size: large;" class="icon_left">
            <i class="el-icon-coin" style="margin: 0 10px; font-size: 20px; color: green;" @click="insertAttr">
              <a class="icon_left"></a>
            </i>
            <b>互动会场/元应用</b>
          </a><br><br>
          <a class="icon_left">&nbsp;&nbsp;&nbsp;<b>低成本打造沉浸式虚拟世界</b></a>
          <a class="v1_right" style="font-size: 20px;"><i class="el-icon-arrow-right"></i></a>
        </el-button>
      </el-col>
    </el-row>

    <el-divider></el-divider>

    <!-- 中_第四个按钮 -->
    <el-row>
      <el-col>
        <el-button class="button" type="success" plain>
          <a style="font-size: large;" class="icon_left">
            <i class="el-icon-video-camera-solid" style="margin: 0 10px; font-size: 20px; color: green;" @click="insertAttr">
              <a class="icon_left"></a>
            </i>
            <b>3D视频剪辑</b>
          </a><br><br>
          <a class="icon_left">&nbsp;&nbsp;&nbsp;<b>低门槛制作高质量数字人视频</b></a>
          <a class="v1_right" style="font-size: 20px;"><i class="el-icon-arrow-right"></i></a>
        </el-button>
      </el-col>
    </el-row>

    <el-divider></el-divider>

    <!-- 下_第一个按钮 -->
    <el-row :gutter="20">
      <el-button class="text_button" type="success"><b>资源管理</b></el-button>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-button class="button" type="success" plain>
          <a style="font-size: large;" class="icon_left">
            <i class="el-icon-edit" style="margin: 0 10px; font-size: 20px; color: green;" @click="insertAttr">
              <a class="icon_left"></a>
            </i>
            <b>设计师</b>
          </a><br><br>
          <a class="icon_left">&nbsp;&nbsp;&nbsp;<b>导入外部3D资产、出售或自用</b></a>
          <a class="v1_right" style="font-size: 20px;"><i class="el-icon-arrow-right"></i></a>
        </el-button>
      </el-col>

      <!-- 下_第二个按钮 -->
      <el-col :span="8">
        <el-button class="button" type="success" plain>
          <a style="font-size: large;" class="icon_left">
            <i class="el-icon-folder-opened" style="margin: 0 10px; font-size: 20px; color: green;" @click="insertAttr">
              <a class="icon_left"></a>
            </i>
            <b>媒体库</b>
          </a><br><br>
          <a class="icon_left">&nbsp;&nbsp;&nbsp;<b>管理自己的多媒体素材</b></a>
          <a class="v1_right" style="font-size: 20px;"><i class="el-icon-arrow-right"></i></a>
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>

</script>

<style>
.button {
  float: left;
  width: 350px;
  height: 90px;
}

.text_button {
  float: left;
  border: none;
  font-family: 华文楷体;
  font-size: 17px;
  background-color: #2657c0;
}

.text_left1 {
  margin: 0px;
  padding: 0px;
  text-align: left;
  font-family: 华文楷体;
  font-size: 18px;
}

.text_left11 {
  float: left;
}

.v1_right {
  float: right;
}

.icon_left {
  float: left;
}

.el-row {
  margin-bottom: 20px;
  max-height: 70px;
}

.el-col {
  border-radius: 4px;
}
</style>

<script>

</script>